// 1. 下载 vue-router 模块
//   yarn add vue-router
// 2. 按需导入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/localData'

// 3. 注册路由组件，可以用到 <router-view></router-view> 和 <router-link></router-link>
Vue.use(VueRouter)

// 4. 路由映射关系(路径与组件)
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Index from '@/views/Index.vue'
import PostList from '@/views/Post/List.vue'
import PostPublish from '@/views/Post/Publish.vue'
const routes = [
    // { path, component, name , redirect , meta  } 里面的一些配置
    { path: '/login', component: Login },
    { path: '/', redirect: '/home' },
    {
        path: '/home', component: Home, redirect: '/home/index', children: [
            // 注意：子路由不要写'/'
            { path: 'index', component: Index },
            { path: 'post_list', component: PostList },
            // 动态路由参数后的问号 ? 表示动态路由的 id 可写可不写
            //   情况1：没传递了 id 就是文章发布
            //   情况2：传递了 id 就是文章编辑
            { path: 'post_publish/:id?', component: PostPublish },
        ]
    }
]

// 5. 创建路由实例

const router = new VueRouter({
    routes: routes
})

// .beforeEach()  前置导航守卫
//    to      要去哪里
//    from    来自哪里
//    next    是否方向的函数
router.beforeEach((to, from, next) => {
    //  后台管理系统，只有登录页是直接放行的
    if (to.path === '/login') {
        next()
    } else {
        // 其他的页面都要检查，有token 放行，没有就去登录页
        if (getToken()) {
            next()
        } else {
            // next({ path: '/login' })
            next('/login')
        }
    }

})


// 6.1 导出路由实例
export default router

